<template>
  <div >
    <el-row>
        <el-col :span="10"></el-col>
        <el-col :span="14"></el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
          <el-card style="margin:10px">
          <div slot="header">
              <i class="el-icon-c-scale-to-original" style="color:#1682e6"></i>
                <span style="font-size:10px;font-weight:bold;"></span>
                <!--
                <span style="margin-left:10px">
                  <el-select v-model="queryParams.linuxClass" placeholder="分类">
                  <el-option
                    v-for="item in linuxClass"
                    :key="item.dictLabel"
                    :label="item.dictLabel"
                    :value="item.dictLabel">
                  </el-option>
                </el-select>
                  <el-input style="width:300px" v-model="queryParams.linux" placeholder="请输入要查询的内容" >
                  <el-button slot="append" icon="el-icon-search"></el-button></el-input>
                  </span>-->

                  <div style="height='150px'">
                        <el-image style="height:150px;width:100%" :src="require('@/assets/image/show.png')"></el-image>
                  </div>
            </div>
            <!--
            <el-table :data="linuxListData" border height="150">
              <el-table-column label="分类" align="center" width="100" prop="linuxClass" :show-overflow-tooltip="true"/>
              <el-table-column label="命令" align="center" width="100" prop="linux" >
                <template slot-scope="scope">
                      <el-link type="primary" @click="guideDetail(scope.row)">{{scope.row.linux}}</el-link>
                </template>
              </el-table-column>
              <el-table-column label="描述" align="center" prop="desc" :show-overflow-tooltip="true"/>
            </el-table>
            <el-pagination
              v-show="total > 0"
              background
              layout="prev, pager, next"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getLinuxList">
            </el-pagination>-->
          </el-card>
        </el-col>
        <!--<el-col :span="12">
          <el-card style="margin:10px">
          <div slot="header">
              <i class="el-icon-star-off"></i>
                -<span style="font-size:10px;font-weight:bold;">操作记录</span>
            </div>
            111
          </el-card>
        </el-col>-->
    </el-row>

    <el-row>
        <el-col :span="12">
          <el-card style="margin:10px">
          <div slot="header">
              <i class="el-icon-bell" style="color:red"></i>
                -<span style="font-size:10px;font-weight:bold;">公告</span>
            </div>
            <div style="height:200px;">
              <!--<div>FairyShell:国产免费的Linux连接工具，支持Linux命令行终端，文件的上传、下载、管理，服务器监控等</div>
              <br>-->
              <el-image style="width: 280px;height:120px;" :src="require('@/assets/image/gonggao.png')"></el-image>

            </div>
            
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card style="margin:10px">
          <div slot="header">
              <i class="el-icon-chat-dot-round" style="color:#13ce66"></i>
                -<span style="font-size:10px;font-weight:bold;">交流群（QQ群）</span>
            </div>
            <div style="height:200px;">
              <el-row>
                <el-col :span="12">
                  <el-image style="width: 160px;height:160px;" :src="require('@/assets/image/qqchatgroup.png')"></el-image>
                </el-col>
                <el-col :span="12">
                  <el-button icon="el-icon-question" style="width:150px" type="primary" size="medium" plain @click="questionOpen">问题反馈</el-button><br><br>
                  <el-button icon="el-icon-s-help" style="width:150px" type="success" size="medium" plain @click="sassOpen">官网</el-button><br><br>
                  <el-button icon="el-icon-tickets" style="width:150px" type="info" size="medium" plain @click="linuxGuideOpen">Linux手册</el-button>
                </el-col>
              </el-row>
           <!--<span>
              <el-image style="width: 160px;height:160px;" :src="require('@/assets/image/weichatgroup.png')"></el-image>
            </span>-->
            </div>
            
          </el-card>
        </el-col>
    </el-row>

    <!-- 命令详情 -->
    <el-dialog title="命令详情" :visible.sync="guideDetailView" width="500px" append-to-body>
      <div>
        <p>
        {{curGuideDetail}}
        </p>
      </div>
    </el-dialog>

    <!-- 版本更新 -->
    <el-dialog title="版本更新" :visible.sync="versionView" 
    :close-on-click-modal="versionData.forceUpdate"
    :close-on-press-escape="versionData.forceUpdate"
    :show-close="versionData.forceUpdate"
    width="500px" append-to-body>
      <el-row>
        <el-col>有新版本，<el-tag >当前版本:{{versionData.curVersion}}</el-tag>，
        <el-tag type="success">最新版本:{{versionData.lastVersion}}</el-tag>
        </el-col>
      </el-row>
      <el-row style="margin-top:20px">
        <el-col>
          <el-tag type="info" effect="dark">版本更新内容：</el-tag><br>
         {{versionData.contents}}
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        请下载新版本进行更新--
        <el-button type="primary" @click="downLoadOpen">下载新版本</el-button>
      </div>
    </el-dialog>
    <!-- 版本更新下载地址 -->
    <el-dialog title="版本下载" :visible.sync="versionDownView" width="600px" append-to-body>
      <el-row>
        <el-col><el-tag >下载地址：</el-tag>
        https://pan.baidu.com/s/1l4J-UV-YAv5UO5Z9Wq4eww?pwd=1688<br>
        （说明：版本更新不会丢失本地数据,更新前请关闭当前应用）
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import * as apis from '@/api/sys'

  export default {
    data() {
      return {
        versionDownView:false,
        versionData:{},
        versionView:false,
        curGuideDetail:null,
        guideDetailView:false,
        queryParams:{pageNum:1,pageSize:10},
        total:0,
        linuxClass:null,
        linuxListData:null,
      }
    },
    created(){
      //this.getLinuxClass()
      //this.getLinuxList()
      this.getVersionInfo()
      
    },
    methods: {
      getLinuxClass() {
        apis.listDictData({}).then(res => {
          this.linuxClass=res.data;
        }).finally(() => {
          
        })
      },
      getLinuxList() {
        apis.listLinux({}).then(res => {
          this.linuxListData=res.data;
        }).finally(() => {
          
        })
      },
      guideDetail(row){
        this.guideDetailView=true;
        this.curGuideDetail=row.desc;
      },
      getVersionInfo(){
        this.versionData={}
        apis.getVersion({}).then(res => {
          if(res.data){
              this.versionView=true
              this.versionData=res.data
              this.versionData.forceUpdate=res.data.foreUpdateFlag?false:true
          }
        }).finally(() => {
          
        })
        
      },
      downLoadOpen(){
        this.versionDownView=true
      },
      async questionOpen(){
        if(top.__TAURI__){
          await top.__TAURI__.shell.open('https://support.qq.com/product/588500');
        }else{
          // 本地测试
          window.open("https://support.qq.com/product/588500","_blank")
        }
      },
      async sassOpen(){
        if(top.__TAURI__){
          await top.__TAURI__.shell.open('https://serverboss.nyawei.cn/');
        }else{
          // 本地测试
          window.open("https://serverboss.nyawei.cn/","_blank")
        }
      },
      async linuxGuideOpen(){
        if(top.__TAURI__){
          await top.__TAURI__.shell.open('https://linux.mmoke.com/');
        }else{
          // 本地测试
          window.open("https://linux.mmoke.com/","_blank")
        }
      },
      

    },
  }
</script>

<style lang="scss" scoped>

</style>
